const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const resolvePath = (relativePath) => path.resolve(__dirname, relativePath);

/*
  npm i vue@2

  npm i webpack webpack-cli webpack-dev-server vue-loader@15 vue-template-compiler@2 html-webpack-plugin css-loader vue-style-loader -D
  npm i mini-css-extract-plugin css-minimizer-webpack-plugin -D
*/

module.exports = {
  // 入口：指示webpack从哪个文件开始打包
  entry: resolvePath("../src/main.js"),
  // 输出：指示webpack打包完的内容输出哪里去
  output: {
    path: resolvePath("../dist"), // 路径
    filename: "[name].js", // 文件名
  },
  // 加载器
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  // 插件
  plugins: [
    new VueLoaderPlugin(),
    // 以 public/index.html 为模板创建新的html文件，新文件会自动引入打包生成js和css等资源
    new HtmlWebpackPlugin({
      template: resolvePath("../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin(),
    // 压缩css
    new CssMinimizerPlugin(),
  ],
  // 模式
  mode: "production",
  resolve: {
    // 文件扩展名
    extensions: [".js", ".json", ".vue"],
  },
  devtool: 'source-map'
};
